<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#flex1 {
				list-style: none;
				display: flex;
				flex-direction: row-reverse;
				flex-wrap: wrap-reverse;
			}
			
			#flex1 li {
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<ul id="flex1">
			<li>1.任何一个容器都可以指定为 Flex 布局。</li>
			<li>2.采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。</li>
			<li>3.注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。</li>
			<li>4.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</li>
			<li>5.flex-direction属性决定主轴的方向（即项目的排列方向）。</li>
			<li>6.flex-direction属性有4个值。 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
			</li>
			<li>7.flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
			</li>
			<li>8.flex-wrap属性有3个值。 nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
			</li>
			<li>9.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 .box { flex-flow:
				<flex-direction> ||
					<flex-wrap>; }
			</li>
		</ul>
	</body>

</html>